<template>
	<div class="stats-panel home-card">
		<div class="home-section-title">
			<div class="title-content">
				<el-icon class="title-icon"><Management /></el-icon>
				流程中心
			</div>
			<div class="title-extra">
				<span v-if="!loading">{{ completedCount }}/{{ stats.length }}</span>
				<div v-else class="loading-skeleton loading-extra"></div>
			</div>
		</div>
		<div v-if="!loading" class="stats-grid">
			<div v-for="(item, i) in stats" :key="i" class="stats-item" :class="getItemClass(item, i)" @click="handleItemClick(item, i)">
				<div class="stats-icon">
					<el-icon><component :is="getIconComponent(item.icon)" /></el-icon>
				</div>
				<div class="stats-content">
					<div class="stats-value">{{ item.value }}</div>
					<div class="stats-title">{{ item.title }}</div>
				</div>
			</div>
		</div>
		<div v-else class="stats-grid-loading">
			<div v-for="i in 4" :key="i" class="stats-item-skeleton">
				<div class="stats-icon-skeleton">
					<div class="loading-spinner"></div>
				</div>
				<div class="stats-content-skeleton">
					<div class="loading-skeleton loading-value"></div>
					<div class="loading-skeleton loading-title"></div>
				</div>
			</div>
		</div>
	</div>
</template>

<script setup lang="ts">
import { computed } from 'vue';
import type { Component } from 'vue';
import { Management, Bell, CircleCheck, Clock, Document, Promotion } from '@element-plus/icons-vue';
import { useRouter } from 'vue-router';

const router = useRouter();

// 图标组件映射表
const iconComponentMap: Record<string, Component> = {
	Management,
	Bell,
	CircleCheck,
	Clock,
	Document,
	Promotion,
};

// 获取图标组件
const getIconComponent = (iconName: string): Component => {
	return iconComponentMap[iconName] || Bell;
};

interface StatsItem {
	icon: string;
	title: string;
	value: string;
}

interface Props {
	stats: StatsItem[];
	loading?: boolean;
}

const props = defineProps<Props>();

// 计算已完成数量
const completedCount = computed(() => {
	return props.stats.filter((item) => item.value !== '-' && parseInt(item.value) > 0).length;
});

// 检查是否有数据
const hasData = (item: any) => {
	return item.value !== '-' && !isNaN(parseInt(item.value)) && parseInt(item.value) > 0;
};

// 获取卡片样式类
const getItemClass = (item: any, index: number) => {
	// 如果没有数据，统一使用默认样式
	if (!hasData(item)) {
		return 'stats-item-default';
	}

	// 有数据时，特殊处理："我发起的" 使用警告色
	if (item.title === '我发起的') {
		return 'stats-item-highlight';
	}

	// 其他有数据的项目使用主色调
	return 'stats-item-active';
};

// 处理卡片点击
const handleItemClick = (item: any, index: number) => {
	// console.log('点击了流程项:', item, index);
	// 使用路由状态传递参数，不在URL中暴露
	router.push({
		path: '/_admin/systodocenter',
		query: {},
		state: {
			filterStatus: item.status,
			fromStats: true,
		},
	});
};
</script>

<style scoped>
.stats-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
	gap: var(--home-spacing-md);
}

.stats-item {
	background: var(--home-bg-primary);
	border-radius: var(--home-radius-md);
	padding: var(--home-spacing-lg);
	display: flex;
	align-items: center;
	gap: var(--home-spacing-md);
	transition: var(--home-transition-base), var(--home-transition-transform);
	cursor: pointer;
	position: relative;
	overflow: hidden;
	border: 1px solid var(--home-border-lighter);

	/* 默认样式 - 没有数据时 */
	&.stats-item-default {
		background: var(--home-bg-regular);
		border-color: var(--home-border-lighter);

		.stats-icon {
			background: var(--home-bg-light);
			color: var(--home-text-placeholder);
		}

		.stats-value {
			color: var(--home-text-placeholder);
		}

		.stats-title {
			color: var(--home-text-secondary);
		}

		&:hover {
			border-color: var(--home-border-light);
			background: var(--home-bg-light);
		}
	}

	/* 有数据时的激活样式 */
	&.stats-item-active {
		background: var(--home-primary-lightest);
		border-color: var(--home-primary-lighter);

		.stats-icon {
			background: var(--home-primary);
			color: #ffffff;
		}

		.stats-value {
			color: var(--home-primary);
		}

		.stats-title {
			color: var(--home-text-regular);
		}

		&:hover {
			border-color: var(--home-primary);
			background: var(--home-primary-lighter);
		}
	}

	/* 高亮样式（我发起的 - 有数据时） */
	&.stats-item-highlight {
		background: var(--home-warning-lightest);
		border-color: var(--home-warning-lighter);

		.stats-icon {
			background: var(--home-warning);
			color: #ffffff;
		}

		.stats-value {
			color: var(--home-warning);
		}

		.stats-title {
			color: var(--home-text-regular);
		}

		&:hover {
			border-color: var(--home-warning);
			background: var(--home-warning-lighter);
		}
	}

	&:hover {
		transform: translateY(-1px);
		box-shadow: var(--home-shadow-hover-light);
	}

	&:active {
		transform: translateY(0);
	}
}

.stats-icon {
	width: 48px;
	height: 48px;
	border-radius: var(--home-radius-md);
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	position: relative;

	.el-icon {
		font-size: 20px;
	}
}

.stats-content {
	flex: 1;
	display: flex;
	flex-direction: column;
	gap: var(--home-spacing-xs);
}

.stats-value {
	font-size: 28px;
	font-weight: 700;
	line-height: 1.1;
	font-family: 'Arial', 'Helvetica', sans-serif;
}

.stats-title {
	font-size: 14px;
	font-weight: 500;
	line-height: 1.3;
}

/* 标题样式增强 */
.title-content {
	display: flex;
	align-items: center;
}

.title-icon {
	width: 20px;
	height: 20px;
	border-radius: var(--home-radius-sm);
	background: var(--home-primary-lightest);
	color: var(--home-primary);
	display: flex;
	align-items: center;
	justify-content: center;
	margin-right: var(--home-spacing-sm);
	font-size: 12px;
}

/* Loading状态样式 */
.stats-grid-loading {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
	gap: var(--home-spacing-md);
}

.stats-item-skeleton {
	background: var(--home-bg-primary);
	border-radius: var(--home-radius-md);
	padding: var(--home-spacing-lg);
	display: flex;
	align-items: center;
	gap: var(--home-spacing-md);
	border: 1px solid var(--home-border-lighter);
	opacity: 0.8;
}

.stats-icon-skeleton {
	width: 48px;
	height: 48px;
	border-radius: var(--home-radius-md);
	background: var(--home-bg-light);
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
}

.stats-content-skeleton {
	flex: 1;
	display: flex;
	flex-direction: column;
	gap: var(--home-spacing-xs);
}

.loading-spinner {
	width: 20px;
	height: 20px;
	border: 2px solid var(--home-border-light);
	border-top: 2px solid var(--home-primary);
	border-radius: 50%;
	animation: spin 1s linear infinite;
}

.loading-skeleton {
	background: linear-gradient(90deg, var(--home-bg-light) 25%, var(--home-bg-regular) 50%, var(--home-bg-light) 75%);
	background-size: 200% 100%;
	animation: shimmer 1.5s infinite;
	border-radius: var(--home-radius-sm);
}

.loading-value {
	height: 28px;
	width: 60%;
}

.loading-title {
	height: 14px;
	width: 80%;
}

.loading-extra {
	height: 13px;
	width: 40px;
}

@keyframes spin {
	0% {
		transform: rotate(0deg);
	}
	100% {
		transform: rotate(360deg);
	}
}

@keyframes shimmer {
	0% {
		background-position: -200% 0;
	}
	100% {
		background-position: 200% 0;
	}
}

/* 响应式设计 */
@media (max-width: 1200px) {
	.stats-grid,
	.stats-grid-loading {
		grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
		gap: var(--home-spacing-sm);
	}

	.stats-item,
	.stats-item-skeleton {
		padding: var(--home-spacing-md);
	}

	.stats-icon,
	.stats-icon-skeleton {
		width: 44px;
		height: 44px;

		.el-icon {
			font-size: 18px;
		}
	}

	.stats-value,
	.loading-value {
		font-size: 24px;
		height: 24px;
	}
}

@media (max-width: 768px) {
	.stats-grid,
	.stats-grid-loading {
		grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
		gap: var(--home-spacing-sm);
	}

	.stats-item,
	.stats-item-skeleton {
		padding: var(--home-spacing-sm) var(--home-spacing-md);
		gap: var(--home-spacing-sm);
	}

	.stats-icon,
	.stats-icon-skeleton {
		width: 40px;
		height: 40px;

		.el-icon {
			font-size: 16px;
		}
	}

	.stats-value,
	.loading-value {
		font-size: 22px;
		height: 22px;
	}

	.stats-title,
	.loading-title {
		font-size: 13px;
		height: 13px;
	}
}

@media (max-width: 480px) {
	.stats-grid,
	.stats-grid-loading {
		grid-template-columns: repeat(2, 1fr);
	}

	.stats-item,
	.stats-item-skeleton {
		padding: var(--home-spacing-md);
		flex-direction: column;
		text-align: center;
		gap: var(--home-spacing-sm);
	}

	.stats-icon,
	.stats-icon-skeleton {
		width: 36px;
		height: 36px;

		.el-icon {
			font-size: 14px;
		}
	}

	.stats-value,
	.loading-value {
		font-size: 20px;
		height: 20px;
	}

	.stats-title,
	.loading-title {
		font-size: 12px;
		height: 12px;
	}
}
</style>
